<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script>
        // for..in... 遍历数组返回下标 遍历对象返回属性名
        // for...of...
        const arr = [1, 2, 3, 4, 5]
        for (const key in arr) {
            console.log(key)
        }

        let obj = {
            name: "孙悟空",
            age: 18
        }
        // 直接遍历数组返回  值，直接遍历对象 报错
        for (const item of arr) {
            console.log(item)
        }
        // .keys() 拿到数组的下标
        for (const index of arr.keys()) {
            console.log(index, "-----");
        }
        // entries()  拿到数组的下标和值
        for (const [index, item] of arr.entries()) {
            console.log(index, item, "====")
        }
        //  arr.values() 拿到数组的值

        //  Object.keys() 拿到对象的属性名并放到数组里
        console.log(Object.keys(obj))//['name']
        // Object.values(obj) 拿到对象的属性值并放到数组里
        console.log(Object.values(obj))//['孙悟空']
        // Object.values(obj) 拿到对象的属性名和属性值并放到数组里
        console.log(Object.entries(obj))
        for (const keys of Object.entries(obj)) {
            console.log(keys);
        }

        // find() 返回满足条件的第一个元素的值 否则undefined
        let list = [{
            name: "孙悟空",
            age: 500,
            like: "桃子"
        },{
            name: "猪八戒",
            age: 100,
            like: "翠花"
        },{
            name: "唐僧",
            age: 18,
            like: "桃子"
        }]

        let found =  list.find(function(val) {
            return val.name == "孙悟空"
        })
        console.log(found);//返回的是值


        // findIndex() 返回满足条件的第一个元素的下标 否则返回-1

        let foundIndex = list.findIndex(function(item) {
            return item.name == "孙k空"
        })
        console.log(foundIndex);

        // 伪数组转成数组
        // Array.from()
        let dom = document.querySelectorAll("div")
        console.log(dom instanceof Array)//false
        let div = Array.from(dom)
        console.log(div instanceof Array)//true

        // 剩余运算符
        let div2 = [...dom]
        console.log(Array.isArray(div2));//true

        //  Array.prototype.slice.call()
        let div3 = Array.prototype.slice.call(dom)
        console.log(Array.isArray(div3))//true


        // fill()  用固定值填充数组
        const arr4 = new Array(5)
        arr4.fill("孙")
        console.log(arr4);

        // [ )
        arr4.fill("hello", 1, 3)
        console.log(arr4);// ['孙', 'hello', 'hello', '孙', '孙']

        let name = "孙"
        let str = `${name}\n换行\t空格`
        console.log(str);

</script>
</body>
</html>